<template>
    <el-row class="height100 reset-main box box-tb box-pack-start">
        <div class="select box box-align-center box-pack-start">
            <span>学期</span>
            <el-select v-model="xqValue" placeholder="选择班级" @change="trClassListLabel" class="text">
                <el-option v-for="(item,index) in xqList" :key="index" :label="item.xn +`-`+item.xq"
                    :value="item.xn +`-`+item.xq"></el-option>
            </el-select>
        </div>

        <el-col class="box box-align-center box-pack-start mt20">
            <div class="nav cp" :class="{active:item.value == currentNav}" v-for="(item,index) in navData" :key="index"
                @click="change(item.value)">{{item.title}}</div>
        </el-col>
        <el-col class="box" style="height: calc(100% - 102px);">
            <el-col class="class box box-tb">
                <div class="box box-tb box-pack-start box-align-start class-top">
                    <h3>筛选</h3>
                    <el-input placeholder="搜索" v-model="searchValue" @input="trClassListLabel" class="mt10">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </div>
                <!-- <div class="class-list">
                    <div class="lists box box-pack-between box-algin-center" :class="{active:null == current}"
                        @click="changeClass(null,null)">
                        <span>全部</span>
                    </div>
                </div> -->
                <div class="class-main">
                    <div class="class-list" v-if="bjList.length !=0">
                        <div class="lists box box-pack-between box-algin-center" :class="{active:index == current}"
                            v-for="(item,index) in bjList" :key="index" @click="changeClass(item.id,index)">
                            <span :title="item.bjmc" class="bj-name">{{item.bjmc}}</span>
                            <span>{{item.number}}</span>
                        </div>
                    </div>
                    <div class="class-list height100 box box-pack-center box-align-center" v-else>
                        <el-empty description="暂无数据" image="../../../static/image/nodata/nodata.png" :image-size="100">
                        </el-empty>
                    </div>
                </div>

            </el-col>
            <el-col class="box box-tb py-main" v-loading="pictLoading" element-loading-background="rgba(0, 0, 0, 0)" element-loading-text="正在加载中" >
                <el-col class="box box-pack-between padd10" v-if="currentNav == 0">
                    <div style="height: 30px;line-height: 30px;">全部待评分</div>
                </el-col>
                <el-col class="box box-pack-between padd10" v-if="currentNav == 1">
                    <div style="height: 30px;line-height: 30px;">全部待批阅</div>
                    <div class="btn">
                        <span class="confirm-btn cp" @click="handlePass()"
                            v-if="currentNav == 1 && stuInfo.length !=0">全部通过</span>
                    </div>
                </el-col>
                <el-col class="box box-pack-between padd10" v-if="currentNav == 3">
                    <div style="height: 30px;line-height: 30px;">全部已批阅</div>
                </el-col>
                <el-col class="box" style="overflow-y: auto;" v-if="stuInfo.length !=0">
                    <el-col class="box box-tb">
                        <div class="list box box-tb box-pack-start padd20 mb20" v-for="(item,i) in stuInfo" :key="i">
                            <div class="box box-pack-start">
                                <div class="left box box-tb">
                                    <div class="info box">
                                        <el-avatar :size="40" :src="item.stuicon" class="avatar">
                                        </el-avatar>
                                        <div class="box box-tb box-pack-start box-align-start ml20">
                                            <div class="box box-pack-start box-algin-center">
                                                <span class="name mr10"
                                                    style="line-height: 28px;">{{item.stuname}}</span>
                                                <div class="class-name">{{item.classname}}</div>
                                            </div>
                                            <span class="time">{{item.time}}</span>
                                        </div>
                                    </div>
                                    <div class="content mt20">
                                        <div class="text tl">{{item.cont}}</div>
                                        <div class="images box box-pack-start mt10">
                                            <div class="posr mr10 mb10" v-for="(f,index) in item.imgs" :key="index">
                                                <div class="c" v-if="f!=null">
                                                    <el-image :src="f.url" class="img cp" v-if="f.fileSuffix != 'mp4'"
                                                        fit="cover" :preview-src-list="resetArr(f.url)"></el-image>
                                                    <el-image v-else :src="f.firstFrame" class="img cp" fit="cover"
                                                        @click="showVideo(f.url)">
                                                    </el-image>
                                                    <i class="el-icon-video-play cp" style="color: #fff;"
                                                        v-if="f.fileSuffix == 'mp4'" @click="showVideo(f.url)"></i>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="score box box-tb box-algin-center box-pack-start">
                                <div class="box box-algin-center box-pack-start">
                                    <span style="min-width: 80px;line-height: 30px;">评分 ：</span>
                                    <div class="box box-algin-center box-pack-start"
                                        style="width: 100%;flex-wrap:wrap;">
                                        <div class="" v-for="(s,n) in item.fps" :key="n">
                                            <div class="pf-list mr10 mb10" v-if="s.result == 1">
                                                {{s.cont +'&nbsp;&nbsp;&nbsp;(+'+s.score+'分)'}}
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <el-popover placement="bottom-start" width="600" trigger="click"
                                    class="popover box box-pack-start" @show="popoverShow(item.fps,item.sjid)">
                                    <div class="box box-algin-center box-pack-start"
                                        style="width: 100%;flex-wrap:wrap;">
                                        <div class="pf-item mr10 mb10 cp" v-for="(s,n) in item.pfbz" :key="n"
                                            :class="{checked:checkedArr.includes(s.id)}" @click="checkedBox(s.id)">
                                            {{s.cont +'&nbsp;&nbsp;&nbsp;(+'+s.score+'分)'}}
                                        </div>
                                    </div>
                                    <div class="box box-pack-end">
                                        <el-button type="text" style="color: #000;" @click="handleConfirm(item)">确定
                                        </el-button>
                                    </div>
                                    <el-button slot="reference" v-if="item.ispy!=1"> + 评分</el-button>
                                </el-popover>
                                <div class="box box-pack-end" v-if="currentNav == 1">
                                    <el-button type="primary" style="background-color: #626bf1;"
                                        @click="handleSinglePass(item.recordid)">通过</el-button>
                                </div>
                            </div>
                            <div class="score box box-tb box-pack-start mt10 mb10">
                                <div class="box box-align-center box-pack-start">
                                    <span style="min-width: 80px;line-height: 30px;">老师评语 ：</span>
                                    <el-input type="textarea" v-model="item.comment" v-if="item.ispy!=1"></el-input>
                                    <div v-else>{{item.comment!=null?item.comment:`暂无评语`}}</div>

                                </div>
                            </div>

                            <el-col class="box" style="padding-left: 134px;" v-if="currentNav != 3">
                                <div class="mr10 selected" :class="{active:selectVal ==a }" v-for="(c,a) in pyList"
                                    :key="a" @click="handlePp(c,a,i)">{{c}}</div>
                            </el-col>
                            <div class="box box-tb box-align-center box-pack-center circle" v-if="item.ispy==1">
                                <h3>综合得分</h3>
                                <i>{{item.score!=null?item.score:0}}分</i>
                                <span class="user-name"><em>评分人</em> {{item.pfperson}}</span>
                            </div>
                        </div>
                    </el-col>
                </el-col>
                <div class="class-list height100 box box-pack-center box-align-center" v-else>
                    <el-empty description="暂无数据" image="../../../static/image/nodata/nodata.png" :image-size="100">
                    </el-empty>
                </div>
            </el-col>
        </el-col>
        <el-dialog :visible.sync="videoShow" width="625px" class="diao" :before-close="handleClose">
            <video :src="videoUrl" width="100%" height="450px" controls autoplay></video>
        </el-dialog>
    </el-row>
</template>

<script>
    import detailView from './components/detail.vue';
    export default {
        components: {
            detailView
        },
        data() {
            return {
                pyList: ["太棒了!!", "再接再厉呀!!", "继续加油啊，你可以更棒的!"],
                loginInfo: this.$store.state.loginInfo,
                bjList: [],
                bj: 0,
                stuInfo: [],
                selectVal: 0,
                tkzt: false,
                current: null,
                sectionid: 0,
                ruleForm: {
                    desc: ''
                },
                navData: [{
                    title: '待评分',
                    value: 0
                }, {
                    title: '待批阅',
                    value: 1
                }, {
                    title: '已批阅',
                    value: 3
                }],
                currentNav: 0,
                xqList: [],
                xqValue: '',
                searchValue: '',
                videoShow: false,
                videoUrl: '',
                classid: '',
                stujlList: [],
                form: {},
                checkedArr: [],
                fpsSHow: false,
                recordids: [],
                sjid: null,
                schoolid: this.$store.state.schoolId,
                curSchoolid:this.$store.state.schoolId,
                selectedRole:this.$store.state.selectedRole,
                pictLoading:false
            };
        },
        mounted() {
            if(this.selectedRole.roleCode=='team_tr'){
                this.schoolid=this.curSchoolid
            }
            this.getXqData()
        },
        methods: {
            handlePp(item, index, i) {
                this.selectVal = index;
                this.stuInfo[i].comment = item;
            },
            trClassListLabel() {
                let url = '/dclass/trclazz';
                let params = {
                    ispy: this.currentNav,
                    xn: this.xqValue.split('-')[0],
                    xq: this.xqValue.split('-')[1].split('（')[0],
                    searchText: this.searchValue,
                    trid: this.loginInfo.user.id,
                    // trid: 24355
                    // schoolid: this.loginInfo.user.schoolId
                };
                //console.log(params);
                this.$ajax.post(url, params).then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        this.bjList = res.list;
                        if (res.list.length != 0) {
                            this.bj = res.list[0].id;

                        }
                        this.getPyData();
                    } else {
                        this.$message.error(res);
                    }
                })
            },
            getXqData() {
                let url = "/comm/getXnxqList";
                let params = {
                    schoolid: this.schoolid
                };
                this.$ajax.post(url).then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        this.xqList = res.xnxqList;
                        let a = res.xnxqList.map(resp => {
                            if (resp.isCur == 1) return resp
                        })
                        a.forEach(r => {
                            if (r != undefined) {
                                this.xqValue = r.xn + '-' + r.xq
                            }
                        })

                        // this.xqValue = a[0].xn +'-'+a[0].xq
                        this.trClassListLabel();
                    }
                })
            },
            change(index) {
                //console.log(index);
                this.currentNav = index
                this.trClassListLabel()
            },
            getPyData() {
                this.pictLoading = true;
                let url = "/yteachplan/pylist";
                let params = {
                    ispy: this.currentNav,
                    xn: this.xqValue.split('-')[0],
                    xq: this.xqValue.split('-')[1].split('（')[0],
                    // classid: 3105,
                    // trid: 24369,
                    // schoolid: 6,
                    schoolid: this.schoolid,
                    classid: this.bj,
                    trid: this.loginInfo.user.id
                };
                console.log(params);
                this.$ajax.post(url, params).then(res => {
                    // console.log(res);

                    if (res.code == 0) {
                        this.stuInfo = res.list;

                        res.list.forEach(item => {
                            console.log(item.recordid);
                            this.recordids.push(item.recordid)
                        })
                    } else {
                        this.$message.error('请求失败！');
                    }
                    this.pictLoading = false;
                })
            },
            changeClass(classid, index) {
                this.current = index;
                this.bj = classid;
                this.getPyData();
            },
            resetArr(url) {
                let arr = []
                arr.push(url)
                return arr
            },
            pyInfoList() {
                var params = {
                    classid: this.classid,
                    rwid: this.rwid
                };
                this.$api.tr.pyInfoList(params).then(res => {
                    //console.log(res.list);
                    if (res.code == '0') {
                        this.stujlList = res.list;
                        //data为集合
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            //开启video
            showVideo(url) {
                this.videoShow = true
                this.videoUrl = url
            },
            handlePy(item) {
                console.log(item);
                let url = "/ysjrecords/modify";
                let params = {
                    id: item.sjid,
                    comment: this.ruleForm.desc
                };
                console.log(params);
                this.$ajax.post(url, params).then(res => {
                    console.log(res);
                })
            },
            //关闭video
            handleClose() {
                this.videoShow = false
                this.videoUrl = ''
            },
            handleConfirm(item) {
                // console.log(item.comment);
                this.$confirm('是否确认?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let url = "/yclassldsjtask/updatePyTask";
                    let params = {
                        ltrid: item.recordid,
                        trid: this.loginInfo.user.id,
                        ldsjid: item.sjid,
                        trName: this.loginInfo.user.name,
                        pfbzids: this.checkedArr.toString(),
                        comment: item.comment
                    };
                    console.log(params);
                    this.$ajax.post(url, params).then(res => {
                        console.log(res);
                        if (res.code == 0) {
                            this.$message.success('批阅完成');
                            this.trClassListLabel()
                        } else {
                            this.$message.error('请求失败！');
                        }
                    })
                }).catch(() => {
                    //几点取消的提示
                });
            },
            handleSinglePass(id) {
                let url = "/yclassldsjtask/singlepass";
                let params = {
                    recordid: id
                };
                this.$ajax.post(url, params).then(res => {
                    //console.log(res);
                    if (res.code == 0) {
                        this.$message.success("已通过")
                        this.trClassListLabel()
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            handlePass() {
                //console.log(this.recordids.toString());
                this.$confirm('是否确认通过?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    let url = "/yclassldsjtask/allpass";
                    let params = {
                        recordids: this.recordids.toString()
                    };
                    this.$ajax.post(url, params).then(res => {
                        //console.log(res);
                        if (res.code == 0) {
                            this.$message.success("全部通过")
                            this.trClassListLabel()
                        } else {
                            this.$message.error('请求失败！');
                        }
                    })
                }).catch(() => {
                    //几点取消的提示
                });
            },
            popoverShow(pfArr, sjid) {
                this.sjid = sjid
                this.checkedArr = []
                pfArr.forEach((item, i) => {
                    if (item.result == 1) this.checkedArr.push(item.id)

                })
                // let list = []
                // this.$nextTick(() => {
                //     pfArr.forEach((item, i) => {
                //         let items = {
                //             arr: []
                //         }
                //         list.push(items)
                //     })
                // });
                // this.checkedArr = list;
            },
            checkedBox(pfbzid, ltrid, ldsjid, i) {

                if (this.checkedArr.includes(pfbzid)) {
                    this.checkedArr = this.checkedArr.filter(function(ele) {
                        return ele != pfbzid;
                    });
                } else {
                    this.checkedArr.push(pfbzid);
                }
                console.log(this.checkedArr.toString());
                // this.form.pfbzids = this.checkedArr[i].arr;
                // this.form.ltrid = ltrid;
                // this.form.ldsjid = ldsjid;
            }
        }
    }
</script>

<style scoped lang="scss">
    .selected {
        padding: 5px;
        border: 1px solid rgb(225, 231, 299);
        cursor: pointer;
        background-color: rgb(225, 231, 299);
        border-radius: 5px;
        transition: .1s ease-in-out;

        &:hover {
            border: 1px solid #626bf1;
        }
    }

    .reset-main {
        padding: 20px;
        background-color: #fff;
        overflow: hidden;
    }

    .class {
        min-width: 220px;
        width: 220px;
        background-color: #fff;
        border: 1px solid #E4ECF4;
        border-radius: 10px;
    }

    .class-main {
        overflow-y: auto;
    }

    ::-webkit-scrollbar {
        width: 5px;
    }

    ::-webkit-scrollbar-track {
        background: #f2f2f2;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #f2f2f2
    }

    ::-webkit-scrollbar-thumb:active {
        background: rgba(0, 0, 0, 0.2);
    }

    .class-top {
        padding: 10px 20px;
        border-bottom: 1px solid #EEF4F8;
    }

    .lists {
        padding: 0 20px;
        height: 58px;
        line-height: 58px;
        cursor: pointer;
        transition: ease-in-out .2s;
        // border-bottom: 1px solid #ccc;
    }

    .lists.active,
    .lists:hover {
        color: #626BF1;
        background: #ECF0FF;
    }

    // 批阅
    .py-main {
        margin-left: 10px;
        height: 100%;
        border: 1px solid #D6DBE7;
    }

    // .class-list {
    //     padding: 0 20px;
    // }

    .nav {
        width: 110px;
        height: 42px;
        line-height: 42px;
        background: #F0F3F8;
        border-radius: 5px 5px 0px 0px;
        color: #5F6572;

        &.active {
            background: #626BF1;
            color: #fff;
        }
    }

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .maxwidth {
        max-width: 1400px;
        margin: 20px auto !important;
    }


    /deep/ .el-empty__image img {
        width: 100%;
    }

    .bj-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .posr {
        position: relative;

        .el-icon-video-play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .list {
        position: relative;
        // min-height: 263px;
        // height: 263px;
        border-radius: 7px;
        background-color: #F7F9FD;


        .circle {
            position: absolute;
            top: 0;
            right: 0;
            box-sizing: border-box;
            width: 130px;
            height: 130px;
            background: #FFF4F6;
            border: 1px solid #FFBCC8;
            border-radius: 50%;

            h3 {
                font-size: 14px;
            }

            i {
                color: #FF5A77;
                font-size: 28px;
            }

            .user-name {
                em {
                    font-size: 12px;
                }
            }
        }

        .left {
            min-width: 375px;
            width: 100%;
            padding-right: 80px;



            .info {
                .avatar {
                    width: 34px;
                    height: 34px;
                }

                .name {
                    font-size: 16px;
                    font-weight: 600;
                }

                .class-name {
                    padding: 0 10px;
                    width: auto;
                    height: 22px;
                    font-size: 14px;
                    color: #626BF1;
                    background: #E5E7FF;
                    border-radius: 11px;
                }

                .time {
                    font-size: 13px;
                }
            }

            .content {
                margin-left: 55px;

                .text {
                    font-size: 16px;
                    font-weight: 600;
                }

                .images {
                    flex-wrap: wrap;

                    .img {
                        width: 96px;
                        height: 96px;
                    }
                }

            }
        }

        .score {
            box-sizing: border-box;
            width: 100%;
            padding-left: 55px;

            .pf-list {
                padding: 0px 20px;
                height: 30px;
                line-height: 30px;
                background: #FFFFFF;
                border: 1px solid #F7C1CB;
                border-radius: 5px;
                color: #FF5A77;
            }

            .pf-btn {
                margin-left: 80px;
                padding: 0px 20px;
                width: 50px;
                height: 30px;
                line-height: 30px;
                background: #FFFFFF;
                border: 1px solid #5F6572;
                border-radius: 5px;
                color: #5F6572;
            }
        }



    }

    .btn {
        span {
            box-sizing: border-box;
            display: block;
            width: 102px;
            height: 32px;
            line-height: 30px;
            background: #FFFFFF;
            border: 1px solid #D6DBE7;
            text-align: center;
        }

        .edit-btn {
            border: 1px solid #FF5A77;
            color: #FF5A77;
        }

        .confirm-btn.confirm-btn {
            background: #FF9B4F;
            color: #fff;
        }

        .pass-btn {
            border: 1px solid #FF9B4F;
            background: #FF9B4F;
            color: #fff;
        }
    }


    .pf-item {
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        background: #FFFFFF;
        border: 1px solid #DDDDDD;
        border-radius: 5px;
        color: #5F6572;

        &.checked {
            background: #FF5A77;
            color: #fff;
        }
    }

    .diao>>>.el-dialog__body {
        padding: 0;
    }


</style>
